/**
    @data: 2019年6月13日17:51:01
    @latest update: 2019年7月1日11:17:20
    @author: liump
    @desc: 线路 线路工作内容表格右侧添加工作内容的弹框,用于光缆工作内容的弹框显示,需要测距,gj - gf gj-jth jth-gf
 */
<template>
  <el-card class="amap-line-table-add-work-dialog">
    <div slot="header" class="clearfix">
      <span style="font-size:16px;">添加光缆工作内容</span>
    </div>
    <el-form >
      <el-form-item>
        <el-col :span="6" style="text-align:right;margin-right:10px;">线程:</el-col>
        <el-col :span="16" style="color:#ff0036" v-show="lineList.length == 0">请选择线段中间测距信息框.</el-col>
        <el-col :span="4" v-show="lineList.length > 0">{{lineStart.tag}}</el-col>
        <el-col :span="2" v-show="lineList.length > 0">--</el-col>
        <el-col :span="4" v-show="lineList.length > 0">{{lineEnd.tag}}</el-col>
        <el-col :span="6" v-show="lineList.length > 0">{{ lineDistance }}米</el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="6" style="text-align:right;margin-right:10px;">工作内容:</el-col>
        <el-col :span="16">
          <el-cascader :options="options" v-model="optionId"></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineAddWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineAddWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
    <el-form v-show="false">
      <el-form-item label="线程:">
        <el-col :span="7">
          <el-select v-model="lineSelectStart.text" @change="handleChangeLine">
            <el-option v-for="item of lineSelectStart.list" :key="item.tag" :value="item.tag"></el-option>
          </el-select>
        </el-col>
        <el-col :span="1">--</el-col>
        <el-col :span="7">
          <el-select v-model="lineSelectEnd.text" @change="handleChangeLine">
            <el-option v-for="item of lineSelectEnd.list" :key="item.tag" :value="item.tag"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">{{distance}}米</el-col>
      </el-form-item>
      <el-form-item label="工作内容:">
        <el-cascader :options="options" v-model="optionId"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleLineAddWorkCancel">取消</el-button>
        <el-button type="primary" @click="handleLineAddWorkConfirm">确认</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'amapLineTableAddWorkDialog',
  computed: {
    lineDistance() {
      let num = 0
      this.lineList.forEach(el => {
        num += el.distance
      })
      return num
    }
  },
  props: {
    lineList: Array,
    lineStart: Object,
    lineEnd: Object,
    distanceList: Array
  },
  data() {
    return {
      options: [],
      optionId: [],
      lineSelectStart: {
        text: '',
        list: ['GJ01', 'GJ02']
      },
      lineSelectEnd: {
        text: '',
        list: ['GJ01', 'GJ02']
      },
      distance: 0
    }
  },
  methods: {
    /**
     * 请求工作内容级联数据
     * @method getLineWorkData
     * @author liump
     */
    getLineWorkData() {
      let success = res => {
        res = res.data
        if (res.flag == 1) {
          let data = res.data
          this.options = res.data
        }
        // this.options = res.data // 测试的模拟数据
      }
      let error = res => {}
      // 线路工作内容表格中的添加工作内容弹框只有光缆的工作内容,只请求光缆的工作内容
      let data = {
        iconType: 'W-GL'
      }
      let param = {
        url: '/api/web/ptwo/getWorkOptRela',
        methods: 'post',
        data: data,
        success: success,
        error: error
      }
      this.$https(param)
      // mock的模拟数据
      // this.$axios.get("/mock/amapWorkMessage.json")
      //   .then(res => {
      //     success(res);
      //   });
    },
    /**
     * 光缆工作内容确认按钮,向父组件传递数据的方法
     * @method handleLineAddWorkConfirm
     * @author liump
     */
    handleLineAddWorkConfirm() {
      let init = () => {
        let obj = {
          at_point: 0, // 操作点,垂直使用(线程不用)
          start_point: 0, // 操作点,水平使用
          end_point: 0, // 操作点,水平使用
          work_direction: 0, // 工作方向, 0水平
          work_length: 0, // 工作长度
          work_option: '', //工作内容最后一级的optionid
          work_type: 2, // 工作类型,1管道,2光缆,3设备,4熔纤
          workload: 0, // 数量,线程数量为0
          line: '', // 线程/操作点渲染及接口参数
          equiptment_point: '', // 设备点,熔纤使用

          lnglat: '' // 表格渲染经纬度,线程无经纬度
        }
        return obj
      }

      let obj = init()
      obj.start_point = this.lineStart.point
      obj.end_point = this.lineEnd.point
      obj.line = `${this.lineStart.tag}--${this.lineEnd.tag}`
      obj.work_length = this.lineDistance
      obj.work_option = this.optionId[this.optionId.length - 1]
      // 光缆的单位为百米
      obj.unit = '米'
      // 在线路的表格中光缆数量列应该显示光缆的长度
      obj.tableShowNum = this.lineDistance
      // 遍历树形结构找到工作内容文本
      let workMessage = []
      this.optionId.forEach(el => {
        this.getArray(this.options, el, workMessage)
      })
      obj.workMessage = workMessage.join(' | ')
      // 如果线程有起点和终点才可以确认
      if (this.lineStart.point && this.lineEnd.point) {
        // 向父组件传递数据
        this.$emit('handleLineAddWorkConfirm', obj)
        console.log('TCL: handleLineAddWorkConfirm -> obj', obj)
        // 清空级联数据
        this.optionId = []
      } else {
        this.$alert('请检查线程的起点与终点.', '提示')
      }
    },
    /**
     * 光缆工作内容取消按钮,向父组件传递数据的方法
     * @method handleLineAddWorkCancel
     * @author liump
     */
    handleLineAddWorkCancel() {
      this.$emit('handleLineAddWorkCancel', false)
      this.optionId = []
    },
    /**
     * 遍历树形结构,根据树形结构找到指定的工作内容文本
     * @method getArray
     * @author liump
     * @param { Array } data 要遍历的树形数组
     * @param { String } optionId 指定条件
     * @param { Array } list 工作内容数组,向该数组中 push 工作内容文本
     */
    getArray(data, optionId, list) {
      for (var i in data) {
        if (data[i].value == optionId) {
          list.push(data[i].label)
          break
        } else {
          this.getArray(data[i].children, optionId, list)
        }
      }
    },
    /**
     * 获取线程起点和终点下拉选择框内容的方法
     * @method handleUpdateList
     * @author liump
     * @param { Array } list 数组
     */
    handleUpdateList(list) {
      this.lineSelectStart.list = list
      this.lineSelectEnd.list = list
    },
    handleChangeLine() {
      let startLnglat = this.lineSelectStart.list.filter(el => {
        return el.tag == this.lineSelectStart.text
      })[0].lnglat
      console.log("TCL: handleChangeLine -> startLnglat", startLnglat)
      let endLnglat = this.lineSelectEnd.list.filter(el => {
        return el.tag == this.lineSelectEnd.text
      })[0].lnglat
      console.log("TCL: handleChangeLine -> endLnglat", endLnglat)
    }
  },
  mounted() {
    this.getLineWorkData()
  }
}
</script>

<style scoped>
.amap-line-table-add-work-dialog {
  width: 360px;
  z-index: 100;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 12px;
}
</style>